import React, { Component } from 'react'
import { Space, Spin, Empty } from 'antd';

import { getLocalStorage } from '../../../utils/utils'
import FileListNav from '../../../components/filelistnav/filelistnav'
import FileList from '../../../components/filelist/filelist'
import { getAllFileData } from '../../../utils/common'

import './allfile.less'

class AllFile extends Component {
    state = {
        data: [],
        userid: JSON.parse(getLocalStorage('userInfo')).id,
        account: JSON.parse(getLocalStorage('userInfo')).account,
        selectedFileId: [],
        spinning: true,
        fileName: ''
    }
    //生命周期函数
    componentDidMount = async () => {
        let allFileData = JSON.parse(getLocalStorage('allFileData')) || [] //取本地缓存中的所有文件数据
        if (allFileData.data) {
            allFileData.data.forEach(v => v.key = v.id)
            this.setState({ data: allFileData.data, spinning: false })
        } else {
            let { account } = JSON.parse(getLocalStorage('userInfo'))
            getAllFileData(account)
            this.setState({ spinning: false })
        }
    }
    //获取选中的文件id值
    getSelectedId = (selectedFileId, name = "") => {
        let fileName = name.substr(0, name.lastIndexOf('.'))
        this.setState({ selectedFileId, fileName })
    }
    setNewData = (data) => {
        this.setState({
            data
        })
    }
    render() {
        const { data, selectedFileId, spinning, fileName } = this.state
        return (
            <div className="allFileBox">
                <FileListNav selectedFileId={selectedFileId} setNewData={this.setNewData} fileName={fileName} />
                <div className="TabTitle">
                    <span>全部文件</span>
                    <span>已全部加载，共{data.length}个文件</span>
                </div>
                {data && data.length > 0 ? <Space size="middle">
                    <Spin  spinning={spinning}>
                        <FileList  data={data} getSelectedId={this.getSelectedId} />
                    </Spin>
                </Space> : <Empty  style={{ marginTop: "15%" }} description="还没有文件，赶快去上传吧！" />}
            </div >
        )
    }
}

export default AllFile